<template>
    <n-form
        ref="formRef"
        label-placement="top"
        :label-width="120"
        :model="form"
        :rules="rules"
    >
        <template v-if="!builtIn">
            <n-form-item label="参数名称" path="name">
                <n-input v-model:value="form.name" placeholder="请输入参数名称" />
            </n-form-item>
            <n-form-item label="参数KEY" path="configKey">
                <n-input v-model:value="form.configKey" placeholder="请输入参数KEY" />
            </n-form-item>
            <n-form-item label="值类型" path="valueType">
                <n-select
                    v-model:value="form.valueType"
                    :options="valueTypeOptions"
                    placeholder="=请选择="
                    class="w-140px"
                >
                </n-select>
            </n-form-item>
            <n-form-item label="参数值" path="configValue">
                <n-input
                    v-if="form.valueType == 'string'"
                    v-model:value="form.configValue"
                    placeholder="请输入参数值"
                />
                <n-input
                    v-if="form.valueType == 'text'"
                    v-model:value="form.configValue"
                    type="textarea"
                    placeholder="请输入参数值"
                />
                <jb-editor
                    v-if="form.valueType == 'richtext'"
                    v-model="form.configValue"
                    class="h-400px"
                    placeholder="请输入参数值"
                ></jb-editor>
                <n-input-number
                    v-if="form.valueType == 'int' || form.valueType == 'decimal'"
                    v-model:value="form.configValue"
                    placeholder="请输入参数值"
                    clearable
                />
                <n-radio-group
                    v-if="form.valueType == 'boolean'"
                    v-model:value="form.configValue"
                    name="radiogroup"
                >
                    <n-space>
                        <n-radio value="1">是</n-radio>
                        <n-radio value="0">否</n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>
        </template>
        <template v-if="builtIn">
            <n-form-item
                v-if="booleanConfig.includes(form.configKey)"
                :label="form.name"
                path="configValue"
            >
                <jb-radio-group
                    v-model:value="form.configValue"
                    url="/api/admin/dictionary/options?typeKey=options_boolean"
                ></jb-radio-group>
            </n-form-item>
            <n-form-item
                v-else-if="strValues.includes(form.configKey)"
                :label="form.name"
                path="configValue"
            >
                <n-input v-model:value="form.configValue" placeholder="请输入参数值" />
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'JBOLT_ACTION_REPORT_WRITER'"
                :label="form.name"
            >
                <n-radio-group v-model:value="form.configValue" name="needCheckSign">
                    <n-space>
                        <n-radio value="sysout"> sysout-控制台 </n-radio>
                        <n-radio value="jboltlog"> jboltlog-日志文件 </n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'JBOLT_ADMIN_STYLE'"
                :label="form.name"
            >
                //这里是后台样式
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'JBOLT_ADMIN_STYLE'"
                :label="form.name"
            >
                //这里是后台样式
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'JBOLT_LOGIN_CAPTURE_TYPE'"
                :label="form.name"
            >
                <n-radio-group v-model:value="form.configValue" name="group">
                    <n-space>
                        <n-radio value="default">默认</n-radio>
                        <n-radio value="gif">GIF验证码</n-radio>
                        <n-radio value="bubble_png">气泡PNG</n-radio>
                        <n-radio value="number_calc">数字运算型</n-radio>
                        <n-radio value="number_calc_cn">数字运算型（中文）</n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'JBOLT_PASSWORD_CHANGE_NOTICE_DAYS'"
                :label="form.name + '(数据单位：天)'"
            >
                <n-input v-model:value.number="form.configValue"></n-input>
                <span class="ml-10">天</span>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'JBOLT_DEPT_MGR_TYPE'"
                :label="form.name"
            >
                <n-radio-group v-model:value="form.configValue" name="needCheckSign">
                    <n-space>
                        <n-radio value="tree_table"> 树形表格管理 </n-radio>
                        <n-radio value="js_table"> JS_TREE树管理 </n-radio>
                    </n-space>
                </n-radio-group>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'ASSETS_VERSION'"
                :label="form.name"
            >
                <div class="flex-col">
                    <n-input
                        v-model:value="form.configValue"
                        placeholder="请输入值"
                    ></n-input>
                    <span>提示：请修改版本号后，刷新浏览器，方能生效</span>
                </div>
            </n-form-item>

            <template v-else-if="form.configKey == 'SYSTEM_NAME'">
                <n-form-item label="系统名称">
                    <n-input
                        v-model:value="form.configValue"
                        placeholder="请输入系统名称"
                    ></n-input>
                </n-form-item>
                <n-form-item :label="`颜色（${form.configValue}）`" path="color">
                    <n-color-picker
                        v-model:value="form.configValue"
                        :modes="['hex']"
                        :show-alpha="false"
                    />
                </n-form-item>
            </template>

            <n-form-item
                v-else-if="form.configKey == 'SYSTEM_ADMIN_LOGO'"
                :label="form.name"
            >
                <div class="flex-col">
                    <n-input
                        v-model:value="form.configValue"
                        placeholder="请输入值"
                    ></n-input>
                    <div class="flex justify-between">
                        <span
                            >图片格式： 主图地址:小图地址:背景色 举例:
                            assets/img/logo.png:assets/img/logo_sm.png:#2d3037</span
                        >
                        <span
                            >文本格式：
                            系统名称:简称:文字颜色:背景色:系统名称字号:简称字号 举例:
                            JBolt开发平台:JBolt:#FFFFFF:#2d3037:32:30</span
                        >
                    </div>
                </div>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'SYSTEM_ADMIN_NAV_MENU_DEFAULT_ICON'"
                :label="form.name"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    maxlength="40"
                ></n-input>
            </n-form-item>

            <n-form-item
                v-else-if="form.configKey == 'SYSTEM_ADMIN_LEFT_NAV_WIDTH'"
                :label="form.name"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    maxlength="40"
                ></n-input>
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'JBOLT_ADMIN_USER_KEEPLOGIN_SECONDS'"
                :label="form.name + '[60~400之间的数字]'"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    minlength="60"
                    maxlength="400"
                ></n-input>
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'SYSTEM_ADMIN_NAV_MENU_DEFAULT_ICON'"
                :label="form.name + '[（60~31622400）秒区间]（一年内） 建议值:604800'"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    minlength="60"
                    maxlength="31622400"
                ></n-input>
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'JBOLT_ADMIN_USER_NOT_KEEPLOGIN_SECONDS'"
                :label="form.name + '[（60~43200）秒区间](12小时内) 建议值:28800'"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    minlength="60"
                    maxlength="43200"
                ></n-input>
            </n-form-item>
            <n-form-item
                v-else-if="form.configKey == 'JBOLT_AUTO_LOCKSCREEN_SECONDS'"
                :label="form.name + '[（0~3600）秒区间](1小时内) 建议值:1800'"
            >
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                    maxlength="3600"
                ></n-input>
            </n-form-item>
        </template>
        <template v-if="form.configKey !== 'JBOLT_LOGIN_BGIMG'">
            <n-form-item label="所属类型" path="typeId">
                <jb-select
                    v-model:value="form.typeId"
                    url="/api/admin/globalConfigType/datas"
                    label-field="name"
                    value-field="id"
                    filterable
                    :clearable="false"
                    placeholder="=请选择="
                    class="w-140px"
                >
                </jb-select>
            </n-form-item>
        </template>
        <template v-if="form.configKey == 'JBOLT_LOGIN_BGIMG'">
            <n-form-item>
                <n-input
                    v-model:value="form.configValue"
                    placeholder="请输入值"
                ></n-input>
            </n-form-item>
        </template>
    </n-form>
</template>
<script setup lang="ts">
import { onMounted, reactive, ref, watch } from 'vue'
import type { FormInst, FormRules } from 'naive-ui'
import { Rules } from '@/utils'
import { JBoltApi } from '@/utils/request'
import { useResetableData } from '@/hooks/common/use-resetable-data'
import { ResData } from '@/typings/request'

const props = withDefaults(
    defineProps<{
        builtIn: boolean
        id: string
        typeId?: string
    }>(),
    {
        builtIn: false,
        id: ''
    }
)

/** 表单相关 start */
const valueTypeOptions = [
    { label: 'string', value: 'string' },
    { label: 'int', value: 'int' },
    { label: 'decimal', value: 'decimal' },
    { label: 'boolean', value: 'boolean' },
    { label: 'text', value: 'text' },
    { label: 'richtext', value: 'richtext' }
]
const booleanConfig = [
    'JBOLT_ADMIN_WITH_TABS',
    'JBOLT_LOGIN_USE_CAPTURE',
    'JBOLT_LOGIN_BGIMG_BLUR',
    'JBOLT_AUTO_CACHE_LOG',
    'JBOLT_LOGIN_NEST',
    'SYSTEM_ADMIN_H50',
    'SYSTEM_ADMIN_GLOBAL_SEARCH_SHOW',
    'JBOLT_LOCKSYSTEM_AFTER_AUTOLOGIN',
    'JBOLT_DICTIONARY_DELETE_ENABLE',
    'SYSTEM_DEPT_ENABLE',
    'SYSTEM_POST_ENABLE',
    'SYSTEM_USER_EXTEND_ENABLE',
    'JBOLT_CHECK_JWT_API_USER_EFFECTIVE_ENABLE',
    'JBOLT_LOGIN_TERMINAL_ONLYONE',
    'JBOLT_TAB_KEEP_AFTER_RELOAD'
]
const strValues = [
    'JBOLT_CHECK_JWT_API_USER_EFFECTIVE_TOKEN',
    'JBOLT_DOMAIN_PUT_ON_RECORD_INFO',
    'JBOLT_DOMAIN_PUT_ON_RECORD_LINK',
    'JBOLT_ADMIN_LOGIN_HTML_FILE',
    'SYSTEM_COPYRIGHT_COMPANY',
    'SYSTEM_COPYRIGHT_LINK',
    'WECHAT_MP_SERVER_DOMAIN',
    'WECHAT_WXA_SERVER_DOMAIN',
    'WECHAT_ASSETS_SERVER_DOMAIN'
]
const formRef = ref<FormInst | null>()
interface ItemType {
    id: string
    typeId: string
    name: string
    builtIn: boolean
    configKey: string
    valueType: string
    configValue: string
}
const form = useResetableData<ItemType>({
    id: '',
    typeId: '',
    name: '',
    configKey: '',
    builtIn: false,
    valueType: 'string',
    configValue: ''
})
const rules: FormRules = reactive({
    name: new Rules().required('请输入参数名称').value,
    typeId: new Rules().required('请选择所属类型').value,
    configKey: new Rules().required('请输入参数KEY').value,
    valueType: new Rules().required('请选择值类型').value,
    configValue: new Rules().required('请输入参数值').value
})

watch(
    () => form.valueType,
    (newV, oldV) => {
        if (oldV == 'richtext') {
            //富文本会导致value变成html，这里要重置
            form.configValue = ''
        }
        switch (newV) {
            case 'string':
            case 'text':
            case 'richtext':
                rules.configValue = new Rules().required('请输入参数值').value
                break
            case 'int':
                rules.configValue = new Rules().required('请输入参数值')._int().value
                break
            case 'decimal':
                rules.configValue = new Rules().required('请输入参数值')._number().value
                break
            case 'boolean':
                rules.configValue = new Rules().required('请输入参数值')._boolean().value
        }
    }
)

/**
 * 提交表单
 */
async function submit() {
    await formRef.value?.validate()

    let url = props.id
        ? `/api/admin/globalConfig/${form.builtIn ? 'update' : 'updateCustomConfig'}`
        : '/api/admin/globalConfig/saveCustomConfig'
    await JBoltApi.tryPost(url, form)
    return true
}

function loadEditData() {
    JBoltApi.get<ResData>(`/api/admin/globalConfig/${props.id}`).then(
        ({ error, result }) => {
            if (error) return
            form._reset(result.data)
        }
    )
}

onMounted(() => {
    if (props.id) {
        loadEditData()
    } else {
        form.typeId = props.typeId || ''
    }
})

defineExpose({
    submit
})

/** 表单相关 end */
</script>
<style scoped></style>
